<script setup lang="ts">
import { watchEffect, reactive } from 'vue';
import axios from 'axios';
import TheWelcome from '../components/TheWelcome.vue'
import { useURLLoader } from './useURLLoader';

const proppp = reactive({
  name: 123
}) 

const stop = watchEffect((onCleanup) => {
  proppp.name

  const controller = new AbortController();
  axios.get('https://jsonplaceholder.typicode.com/todos/1', {
    signal: controller.signal
  }).then((res:any) => {
    console.log(4)
  })
  console.log('1')
  onCleanup(() => {
    console.log('3')
    controller.abort()
  })
  console.log('2')

})

interface res {
  title: string
}

const todo = useURLLoader<res>('https://jsonplaceholder.typicode.com/todos/1')

// function requestApi() {
//   axios.get(', {
//     signal: controller.signal
//   }).then((res:any) => {
//     console.log(res)
//   })
// }

function handleAdd() {
  proppp.name ++
}

</script>

<template>
  <main>
    <TheWelcome />
    <div v-if="todo.loading">
      {{ todo.result && todo.result.title }}
    </div>
    <div v-else>
      loaded
    </div>
    <button @click="handleAdd">jjj</button>
  </main>
</template>
